<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>
                <%= title %>
            </h1>
        </header>

        <main>
            <!-- 消息提示 -->
            <% if (typeof message !== 'undefined' && message) { %>
                <div class="alert alert-success">
                    <%= message %>
                </div>
                <% } %>

                    <% if (typeof error !== 'undefined' && error) { %>
                        <div class="alert alert-error">
                            <%= error %>
                        </div>
                        <% } %>

                            <!-- 搜索和筛选区域 -->
                            <div class="search-filter-container">
                                <form method="GET" action="/student/list" class="search-form">
                                    <div class="search-row">
                                        <input type="text" name="search" placeholder="搜索姓名或专业..." value="<%= search %>" class="search-input">

                                        <select name="gender" class="filter-select">
                            <option value="">所有性别</option>
                            <option value="男" <%= gender === '男' ? 'selected' : '' %>>男</option>
                            <option value="女" <%= gender === '女' ? 'selected' : '' %>>女</option>
                        </select>

                                        <select name="major" class="filter-select">
                            <option value="">所有专业</option>
                            <% majors.forEach(function(majorItem) { %>
                                <option value="<%= majorItem %>" <%= major === majorItem ? 'selected' : '' %>>
                                    <%= majorItem %>
                                </option>
                            <% }); %>
                        </select>

                                        <select name="limit" class="filter-select">
                            <option value="10" <%= limit == 10 ? 'selected' : '' %>>10条/页</option>
                            <option value="20" <%= limit == 20 ? 'selected' : '' %>>20条/页</option>
                            <option value="50" <%= limit == 50 ? 'selected' : '' %>>50条/页</option>
                        </select>

                                        <button type="submit" class="btn btn-primary search-btn">搜索</button>
                                        <a href="/student/list" class="btn btn-secondary">重置</a>
                                    </div>
                                </form>
                            </div>

                            <!-- 操作按钮区域 -->
                            <div class="actions">
                                <div class="actions-left">
                                    <a href="/student/add" class="btn btn-primary">添加学生</a>
                                    <a href="/student/statistics" class="btn btn-info">数据统计</a>
                                    <a href="/student/export" class="btn btn-export">导出Excel</a>
                                    <a href="/student/import" class="btn btn-import">导入数据</a>
                                    <button type="button" id="batchDeleteBtn" class="btn btn-danger" style="display: none;">批量删除</button>
                                </div>
                                <div class="actions-right">
                                    <span class="total-info">共 <%= total %> 个学生</span>
                                </div>
                            </div>

                            <!-- 学生列表 -->
                            <div class="table-container">
                                <% if (students && students.length > 0) { %>
                                    <form id="batchForm" method="POST" action="/student/batch-delete">
                                        <table class="student-table">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <input type="checkbox" id="selectAll">
                                                    </th>
                                                    <th>ID</th>
                                                    <th>姓名</th>
                                                    <th>年龄</th>
                                                    <th>性别</th>
                                                    <th>专业</th>
                                                    <th>成绩</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <% students.forEach(function(student) { %>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" name="studentIds" value="<%= student.id %>" class="student-checkbox">
                                                        </td>
                                                        <td>
                                                            <%= student.id %>
                                                        </td>
                                                        <td>
                                                            <%= student.name %>
                                                        </td>
                                                        <td>
                                                            <%= student.age %>
                                                        </td>
                                                        <td>
                                                            <%= student.gender %>
                                                        </td>
                                                        <td>
                                                            <%= student.major %>
                                                        </td>
                                                        <td class="score-cell <%= student.score >= 90 ? 'excellent' : student.score >= 80 ? 'good' : student.score >= 60 ? 'pass' : 'fail' %>">
                                                            <%= student.score %>
                                                        </td>
                                                        <td class="actions-cell">
                                                            <a href="/student/edit/<%= student.id %>" class="btn btn-small btn-secondary">编辑</a>
                                                            <a href="/student/delete/<%= student.id %>" class="btn btn-small btn-danger" onclick="return confirm('确定要删除学生 <%= student.name %> 吗？')">删除</a>
                                                        </td>
                                                    </tr>
                                                    <% }); %>
                                            </tbody>
                                        </table>
                                    </form>

                                    <!-- 分页导航 -->
                                    <div class="pagination">
                                        <% if (currentPage > 1) { %>
                                            <a href="?page=<%= currentPage - 1 %>&search=<%= search %>&gender=<%= gender %>&major=<%= major %>&limit=<%= limit %>" class="btn btn-secondary">上一页</a>
                                            <% } %>

                                                <span class="page-info">
                            第 <%= currentPage %> 页 / 共 <%= totalPages %> 页
                        </span>

                                                <% if (currentPage < totalPages) { %>
                                                    <a href="?page=<%= currentPage + 1 %>&search=<%= search %>&gender=<%= gender %>&major=<%= major %>&limit=<%= limit %>" class="btn btn-secondary">下一页</a>
                                                    <% } %>
                                    </div>

                                    <% } else { %>
                                        <div class="empty-state">
                                            <p>暂无学生信息</p>
                                            <a href="/student/add" class="btn btn-primary">添加第一个学生</a>
                                        </div>
                                        <% } %>
                            </div>
        </main>

        <footer>
            <p>&copy; 2025 学生信息管理系统(小何技术支持)</p>
        </footer>
    </div>

    <script>
        // 全选/取消全选功能
        document.getElementById('selectAll').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.student-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            toggleBatchDeleteButton();
        });

        // 监听单个复选框变化
        document.querySelectorAll('.student-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', toggleBatchDeleteButton);
        });

        // 切换批量删除按钮显示
        function toggleBatchDeleteButton() {
            const checkedBoxes = document.querySelectorAll('.student-checkbox:checked');
            const batchDeleteBtn = document.getElementById('batchDeleteBtn');

            if (checkedBoxes.length > 0) {
                batchDeleteBtn.style.display = 'inline-block';
            } else {
                batchDeleteBtn.style.display = 'none';
            }
        }

        // 批量删除确认
        document.getElementById('batchDeleteBtn').addEventListener('click', function() {
            const checkedBoxes = document.querySelectorAll('.student-checkbox:checked');
            if (checkedBoxes.length === 0) {
                alert('请选择要删除的学生');
                return;
            }

            if (confirm(`确定要删除选中的 ${checkedBoxes.length} 个学生吗？`)) {
                document.getElementById('batchForm').submit();
            }
        });
    </script>
</body>

</html>